<template>
  <div class="drawerStyle">
    <div class="avatar-container" v-if="userInfoData.length">
      <div v-for="item in userInfoData" :key="item.id" class="box-avatar">
        <img :src="item.avatar || defaultAvatar" @click="handleCreate(item.id)" />
        <span>{{ item.builderName }}</span>
        <div>{{ item.leader ? '施工班组长' : '施工队员' }}</div>
      </div>
    </div>
    <Empty v-else />
    <StepInfoMenuDrawer :userSubData="userSubData" @register="registerDrawerInfo" />
  </div>
</template>
<script lang="ts">
  import { toRaw, onMounted, watch } from 'vue';
  import StepInfoMenuDrawer from './StepInfoMenuDrawer.vue';
  import { defineComponent, ref } from 'vue';
  import { useDrawerInner, useDrawer } from '/@/components/Drawer';
  import { Empty } from 'ant-design-vue';
  import { getProjectManagementUserApi } from '/@/api/zkrq/projectManagement';
  import defaultAvatar from '/@/assets/images/default-avatar.png';
  interface UserData {
    builderType: number;
    id: string;
    builderName: string;
    constructionTeamId: string;
    avatar: string;
    mobile: string;
    sex: number;
    age: number;
    leader: number;
    certificateName: string;
    constructionTeamName: string;
  }
  export default defineComponent({
    name: 'StepMenuDrawer',
    components: { StepInfoMenuDrawer, Empty },

    props: {
      record: {
        type: Object,
      },
      closeModal: {
        type: Function,
        default: () => {},
      },
      setModalProps: {
        type: Function,
        default: () => {},
      },
      // userData: {
      //   type: Array as PropType<UserData[]>,
      //   default: () => [],
      // },
    },
    emits: ['success', 'register'],
    setup(props) {
      props.setModalProps({ showFooter: false, loading: false });
      watch(
        () => props.record,
        (val) => {
          console.log(val);

          val && Object.keys(val).length && initUser(val);
        },
        { immediate: true },
      );
      onMounted(() => {});
      const [registerDrawerInfo, { openDrawer }] = useDrawer();

      const userSubData = ref<UserData[]>([]);

      const isUpdate = ref(false);
      const userInfoData = ref<UserData[]>([]);

      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
        setDrawerProps({ confirmLoading: false });

        isUpdate.value = !!data?.isUpdate;
      });
      function handleCreate(id: string, record: Recordable = {}) {
        const params = userInfoData.value.find((e) => {
          return e.id === id;
        });
        userSubData.value = [params as UserData];
        openDrawer(true, {
          record,
          isUpdate: false,
        });
      }

      async function initUser(params) {
        console.log('当前params：', params);
        console.log('当前ID：', params?.builder_id);
        const ret = await getProjectManagementUserApi({
          id: params?.builder_id || '',
          str: toRaw(params),
        });

        userInfoData.value = ret;
      }

      return {
        handleCreate,
        // loading,
        isUpdate,
        userInfoData,
        registerDrawer,
        userSubData,
        registerDrawerInfo,
        defaultAvatar,
      };
    },
  });
</script>
<style lang="less" scoped>
  .avatar-container {
    margin: 8px 4px 0px 4px;

    .box-avatar {
      display: inline-block;
      margin: 16px 0px;
      width: 80px;
      width: 20%;
      text-align: center;

      img {
        cursor: pointer;
        width: 80px;
        height: 80px;
        opacity: 1;
        margin: auto;
        border-radius: 50%;
      }

      span {
        display: block;
        font-size: 14px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      div {
        font-size: 12px;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
</style>
<style lang="less">
  .drawerStyle-tc .scrollbar__view {
    height: 100%;

    & > .ant-empty {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  .drawerStyle-tc .vben-basic-title.vben-basic-drawer-header {
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .drawerStyle-tc .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-header-title {
    flex-direction: row-reverse !important;
  }

  .drawerStyle-tc .scrollbar__wrap.scrollbar__wrap--hidden-default {
    padding: 0 !important;
  }
</style>
